<template>
  <div class="home">
    <div class="header">
      <div
        class="address_map"
        @click="$router.push({ name: 'address', params: { city: city } })"
      >
        <i class="fa fa-map-marker"></i>
        <span>{{ address }}</span>
        <i class="fa fa-sort-desc"></i>
      </div>
      <div class="weather_wrap">
        {{ weather.weather }}<span>{{ weather.temperature }}</span>
      </div>
    </div>
    <div
      class="search_wrap"
      :class="{ fixedview: showFilter }"
      @click="$router.push('/search')"
    >
      <div class="shop_search">
        <i class="fa fa-search"></i>
        搜索商家 商家名称
      </div>
    </div>
    <div id="container">
      <mt-swipe :auto="4000" class="swiper">
        <mt-swipe-item v-for="(item, index) in swipeImgs" :key="index"
          ><img :src="item" alt=""
        /></mt-swipe-item>
      </mt-swipe>
      <mt-swipe :auto="0" class="entries">
        <mt-swipe-item
          v-for="(entry, i) in entries"
          :key="i"
          class="entry_wrap"
        >
          <div class="foodentry" v-for="(item, index) in entry" :key="index">
            <div class="img_wrap">
              <img :src="item.image" alt="" />
            </div>
            <span>{{ item.name }}</span>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="shoplist-title">推荐商家</div>
    <FilterView
      :filterData="filterData"
      @searchFixed="showFilterView"
      @update="update"
    ></FilterView>
    <mt-loadmore
      :top-method="loadData"
      :bottom-method="loadMore"
      :bottom-all-loaded="allLoaded"
      :auto-fill="false"
      :bottomPullText="bottomPullText"
      ref="loadmore"
    >
      <div class="shoplist">
        <IndexShop
          v-for="(item, index) in restaurants"
          :key="index"
          :restaurant="item"
        ></IndexShop>
      </div>
    </mt-loadmore>
  </div>
</template>
<script>
import { Swipe, SwipeItem, Loadmore } from "mint-ui";
import FilterView from "../components/FilterView";
import IndexShop from "../components/IndexShop";
export default {
  name: "home",
  data() {
    return {
      swipeImgs: [
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607253906198&di=c1381a9153d2ec20161191a8354bbab6&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180823%2F1409c77622564d959077dd6000246cb5.jpeg",
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1431080330,1492291206&fm=15&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4062915802,3259005485&fm=26&gp=0.jpg",
        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3217815253,3680239821&fm=26&gp=0.jpg",
      ],
      entries: [
        [
          {
            name: "美食",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/美食.png`,
          },
          {
            name: "商超便利",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/便利店.png`,
          },
          {
            name: "水果",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/水果.png`,
          },
          {
            name: "医药健康",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/医药健康.png`,
          },
          {
            name: "浪漫鲜花",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/鲜花.png`,
          },
          {
            name: "跑腿代购",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/跑腿APP.png`,
          },
          {
            name: "汉堡披萨",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/汉堡.png`,
          },
          {
            name: "厨房生鲜",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/生鲜-虾类.png`,
          },
          {
            name: "炸鸡炸串",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/mbe风格_炸鸡.png`,
          },
          {
            name: "地方美食",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/美食-面.png`,
          },
        ],
        [
          {
            name: "麻辣烫",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/麻辣烫.png`,
          },
          {
            name: "下午茶",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/下午茶.png`,
          },
          {
            name: "地方小吃",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/小吃.png`,
          },
          {
            name: "大牌惠吃",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/美食-面.png`,
          },
          {
            name: "米粉面馆",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/美食-面.png`,
          },
          {
            name: "包子粥店",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/美食-面.png`,
          },
          {
            name: "速食简餐",
            image: `https://gitee.com/simon324/img-hosting/raw/master/vueimg/美食-面.png`,
          },
        ],
      ],
      filterData: {
        navTab: [
          { name: "综合排序", icon: "caret-down" },
          { name: "距离最近", condition: "distance" },
          { name: "品质联盟", condition: "is_premium" },
          { name: "筛选", icon: "filter" },
        ],
        sortBy: [
          { name: "综合排序", code: "" },
          { name: "好评优先", code: "rating" },
          { name: "销量最高", code: "recent_order_num" },
          { name: "起送价最低", code: "" },
          { name: "配送最快", code: "" },
          { name: "配送费最低", code: "" },
          { name: "人均从低到高", code: "" },
          { name: "人均从高到低", code: "" },
          { name: "通用排序", code: "" },
        ],
        screenBy: [
          {
            title: "商家服务（可多选）",
            data: [
              {
                name: "蜂鸟专送",
                icon:
                  "https://cube.elemecdn.com/b/9b/45d2f6ff0dbeef3a78ef0e4e90abapng.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
                code: "delivery_mode[]",
              },
              {
                name: "到店自取",
                icon:
                  "https://cube.elemecdn.com/1/90/af4de7fc6dc858874b1d5e8a5481cpng.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "品牌商家",
                icon:
                  "https://cube.elemecdn.com/6/7c/417ba499b9ef8240b8014a453bf30png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "新店",
                icon:
                  "https://cube.elemecdn.com/c/93/ded991df780906f7471128a226104png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "接收预订",
                icon:
                  "https://cube.elemecdn.com/8/7b/4cc4e93572cde4aff248d539792c9png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "食无忧",
                icon:
                  "https://cube.elemecdn.com/2/cd/444d002a94325c5dff004fb3b9505png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
              {
                name: "开发票",
                icon:
                  "https://cube.elemecdn.com/3/d4/5668ffc03151826f95b75249bea31png.png?x-oss-process=image/format,webp/resize,w_24,h_24,m_fixed",
                select: false,
              },
            ],
            id: "MPI",
          },
          {
            title: "优惠活动",
            data: [
              { name: "首次光顾立减", select: false },
              { name: "满减优惠", select: false },
              { name: "下单返红包", select: false },
              { name: "进店领红包", select: false },
              { name: "配送费优惠", select: false },
              { name: "赠品优惠", select: false },
              { name: "特价商品", select: false },
              { name: "品质联盟红包", select: false },
            ],
            id: "offer",
          },
          {
            title: "人均消费",
            data: [
              { name: "¥20以下", select: false },
              { name: "¥20 - ¥40", select: false },
              { name: "¥40 - ¥60", select: false },
              { name: "¥60 - ¥80", select: false },
              { name: "¥80 - ¥100", select: false },
              { name: "¥100以上", select: false },
            ],
            id: "per",
          },
        ],
      },
      showFilter: false,
      restaurants: [],
      allLoaded: false,
      bottomPullText: "上拉加载更多",
      data: null,
    };
  },
  computed: {
    address() {
      return this.$store.getters.address;
    },
    city() {
      return (
        this.$store.getters.localtion.addressComponent.city ||
        this.$store.getters.localtion.addressComponent.province
      );
    },
    weather() {
      return this.$store.getters.weather;
    },
  },
  components: {
    FilterView,
    IndexShop,
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios("/eleapi").then((res) => {
        this.restaurants = res.data.data;
      });
    },
    loadData() {
      this.allLoaded = false;
      this.bottomPullText = "上拉加载更多";
      this.$axios("/eleapi", this.data).then((res) => {
        this.$refs.loadmore.onTopLoaded();
        this.restaurants = res.data.data;
      });
    },
    loadMore() {
      if (!this.allLoaded) {
        this.$axios("/eleapi").then((res) => {
          this.$refs.loadmore.onBottomLoaded();
          this.allLoaded = false;
          this.bottomPullText = "没有更多了哦";
        });
      }
    },
    showFilterView(isShow) {
      this.showFilter = isShow;
    },
    update(condition) {
      this.data = condition;
      this.loadData();
    },
  },
};
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.header {
  background-color: #009eef;
  padding: 10px 16px;
}
.header .address_map {
  color: #fff;
  font-weight: bold;
}
.address_map i {
  margin: 0 3px;
  font-size: 18px;
  vertical-align: middle;
}
.address_map span {
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.search_wrap .shop_search {
  background-color: #fff;
  padding: 10px 0;
  border-radius: 4px;
  text-align: center;
  color: #aaa;
}

.search_wrap {
  position: sticky;
  top: 0px;
  z-index: 999;
  box-sizing: border-box;
  background-color: #009eef;
  padding: 10px 16px;
}
.swiper {
  height: 100px;
}
.swiper img {
  width: 100%;
  height: 100px;
}

.entries {
  background: #fff;
  height: 47.2vw;
  text-align: center;
  overflow: hidden;
}
.foodentry {
  width: 20%;
  float: left;
  position: relative;
  margin-top: 2.933333vw;
}
.foodentry .img_wrap {
  position: relative;
  display: inline-block;
  width: 12vw;
  height: 12vw;
}
.img_wrap img {
  width: 100%;
  height: 100%;
}
.foodentry span {
  display: block;
  color: #666;
  font-size: 0.32rem;
}
/* 推荐商家 */
.shoplist-title {
  display: flex;
  align-items: flex;
  justify-content: center;
  height: 9.6vw;
  line-height: 9.6vw;
  font-size: 16px;
  color: #333;
  background: #fff;
}
.shoplist-title:after,
.shoplist-title:before {
  display: block;
  content: "一";
  width: 5.333333vw;
  height: 0.266667vw;
  color: #999;
}
.shoplist-title:before {
  margin-right: 3.466667vw;
}
.shoplist-title:after {
  margin-left: 3.466667vw;
}

.fixedview {
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 999;
}

.mint-loadmore {
  height: calc(100% - 95px);
  overflow: auto;
}
.weather_wrap {
  color: white;
  font-size: 12px;
  padding-left: 5%;
  margin-top: 5px;
}
.weather_wrap span {
  margin-left: 5px;
}
</style>